<template>
	<view class="search-container">
		<!-- 头部搜索 -->
		<view class="header">
			<view class="search-box">
				<image src="/static/images/search.png" />
				<input type="text" placeholder="请输入商品名称" v-model="searchData" @confirm="search" />
			</view>
			<!-- <view class="cancel" @click="goBack">取消</view> -->
		</view>
		<!-- 搜索历史 -->
		<view class="search-history">
			<view class="up">
				<view class="title">历史搜索</view>
				<image src="/static/images/ash-bin.png" @click="clear" />
			</view>
			<view class="content">
				<view class="item" v-for="item in homeStore.searchRecord" @click="recordSearch(item)">{{item}}</view>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="filter" v-if="homeStore.goodListFilter.length > 0">
			<uni-data-select v-model="value" :localdata="range" @change="select" :clear="false"></uni-data-select>
		</view>
		<!-- 商品列表 -->
		<view class="good-list">
			<view class="good-item" v-for="item in homeStore.goodListFilter" :key="item.id" @click="detailStore.goDetail(item.id)">
				<image :src="item.img_url" />
				<view class="title">{{item.title}}</view>
				<view class="price">
					<view class="newPrice">￥{{item.sell_price}}</view>
					<view class="oldPrice">{{item.market_price}}</view>
				</view>
				<view class="info">
					<view class="text">热卖中</view>
					<view class="residue">剩余{{item.stock_quantity}}件</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onUnload
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import {
		useHomeStore,
		useDetailStore
	} from '../../stores/store';
	const homeStore = useHomeStore()
	const detailStore = useDetailStore()
	const searchData = ref('')

	const range = ref([{
			value: 0,
			text: '销量'
		},
		{
			value: 1,
			text: '好评'
		},
		{
			value: 2,
			text: '价格'
		},
	])
	const value = ref(0)

	// 选择下拉框
	const select = (e) => {
		homeStore.sortData = e
		homeStore.getGoodListFilterData(searchData.value)
	}

	// 搜索
	const search = (e, k) => {
		if (!e.detail.value.trim()) {
			uni.showToast({
				title: '商品名称不能为空',
				icon: 'error'
			})
			return
		}
		let keyword = e.detail.value.trim()
		let index = homeStore.searchRecord.findIndex(item => item === keyword)
		if (index > -1) {
			homeStore.searchRecord.splice(index, 1)
		}
		homeStore.searchRecord.push(keyword)

		// 发请求
		homeStore.getGoodListFilterData(keyword)
	}

	// 点击历史记录搜索
	const recordSearch = (item) => {
		searchData.value = item
		const keyword = {
			detail: {
				value: item
			}
		}
		search(keyword)
	}

	// 清空搜索历史
	const clear = () => {
		homeStore.searchRecord = []
	}
	
	onUnload(() => {
		homeStore.goodListFilter = []
	})
</script>

<style lang="scss" scoped>
	.search-container {
		width: px2rpx(375);

		// 头部搜索
		.header {
			width: px2rpx(375);
			height: px2rpx(54);
			display: flex;
			align-items: center;
			justify-content: center;

			.search-box {
				border-radius: px2rpx(17);
				margin: px2rpx(10);
				width: px2rpx(345);
				height: px2rpx(34);
				display: flex;
				align-items: center;
				background-color: #ebedf0;

				image {
					width: px2rpx(30);
					height: px2rpx(30);
					margin: 0 px2rpx(10);
				}

				input {
					width: px2rpx(240);
				}
			}
		}

		// 搜索历史
		.search-history {
			width: px2rpx(375);
			height: auto;

			.up {
				width: px2rpx(355);
				height: px2rpx(20);
				margin: px2rpx(10);
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-weight: bold;
				}

				image {
					width: px2rpx(20);
					height: px2rpx(20);
				}
			}

			.content {
				width: px2rpx(355);
				height: auto;
				margin: px2rpx(10);
				display: flex;
				flex-wrap: wrap;

				.item {
					padding: px2rpx(5);
					height: px2rpx(20);
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #000;
					width: auto;
					border-radius: px2rpx(5);
					margin: 0 px2rpx(5) px2rpx(5) 0;
				}
			}
		}

		// 筛选
		.filter {}

		// 商品列表
		.good-list {
			width: px2rpx(375);
			display: flex;
			flex-wrap: wrap;

			.good-item {
				width: px2rpx(165);
				height: px2rpx(280);
				display: flex;
				flex-direction: column;
				margin: px2rpx(10);

				image {
					width: px2rpx(165);
					// height: px2rpx(130);
				}

				.title {
					width: px2rpx(165);
					font-size: px2rpx(12);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: px2rpx(5) 0;
				}

				.price {
					display: flex;
					align-items: center;

					.newPrice {
						font-size: px2rpx(16);
						color: #ff0000;
						margin-right:px2rpx(10);
					}

					.oldPrice {
						font-size: px2rpx(12);
						text-decoration: line-through;
					}
				}

				.info {
					display: flex;
					font-size: px2rpx(14);
					justify-content: space-between;
				}
			}
		}
	}
</style>